<template>
	<view class="page flex_c">
		<view class="nav_bar" :style="`background: url(${$util.prefix('auth/store_auth_nav_bg.png')}) 0 0 no-repeat;`">
			<uni-nav-bar color="#333" left-icon="left" title="入驻" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$native.backAction()">
			</uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<!-- @click="onChooseAvatar" -->
		<view class="avatar">
			<image :src="info.avatar" mode="aspectFill" class="avatar_image" v-if="info.avatar"></image>
			<!-- <image :src="$util.prefix('public/upload_avatar.png')" mode="aspectFill" class="avatar_image" v-else>
			</image> -->
			<image :src="$util.prefix('public/upload_avatar_icon.png')" mode="aspectFill" class="avatar_icon"></image>
		</view>

		<view class="input flex_r_between">
			<view class="label">昵称</view>
			<view class="right flex_center">
				<input disabled type="text" placeholder="请输入" placeholder-class="input-placeholder"
					v-model="info.nickname" />
			</view>
		</view>

		<view class="input flex_r_between">
			<view class="label">年龄</view>
			<view class="right flex_center">
				<input disabled type="number" placeholder="请输入" placeholder-class="input-placeholder" v-model="info.age"
					maxlength="2" />
			</view>
		</view>

		<view class="input flex_r_between">
			<view class="label">性别</view>
			<view class="right flex_center">
				<view class="view" :id="info.sex == -1 ? 'nohave' : ''">
					{{ info.sex == 1 ? '男' : info.sex == 0 ? '女' : '' }}
				</view>
				<!-- <u-icon name="arrow-right" size="24rpx" color="#131313"></u-icon> -->
			</view>
		</view>

		<view class="input flex_r_between">
			<view class="label">地址</view>
			<view class="right flex_center">
				<view class="view">
					{{ info.province || '' }} {{ info.city || '' }} {{ info.area || '' }}
				</view>
				<!-- <u-icon name="arrow-right" size="24rpx" color="#131313"></u-icon> -->
			</view>
		</view>

		<view class="textarea">
			<textarea disabled placeholder="个性签名" placeholder-class="input-placeholder"
				v-model="info.introduce"></textarea>
		</view>

		<!-- 标签 -->
		<view class="tags">
			<view class="tags_title flex_center">
				<view class="block flex_center">
					<view class="title">添加标签(最多3个)</view>
				</view>
			</view>
			<view class="tags_list flex_center">
				<view class="tags_item flex_r_around" v-for="(item,index) in tags_list" :key="index">
					<text>{{ item }}</text>
					<view class="tags_list_icon" @click="tags_list.splice(index , 1)">
						<u-icon name="close-circle-fill" color="#FD2A53" size="32rpx"></u-icon>
					</view>
				</view>
			</view>

			<view class="tags_input flex_center" @click="show_tags = true">
				<view class="placeholder">{{
					tags_list.length > 0 && tags_list.length < 3 ? '继续添加'
					: tags_list.length >= 3 ? '已达上限'
					: '请输入'
				}}</view>
				<!-- <text>/6</text> -->
			</view>

		</view>

		<!-- <view class="textarea">
			<textarea placeholder="个人介绍" placeholder-class="input-placeholder" v-model="info.content"></textarea>
		</view> -->

		<view class="content_image">
			<view class="label">图片详情({{ images_list.length }}/9)</view>
			<view class="images_list flex_center">
				<view class="image_box" v-for="(item,index) in images_list" :key="index">
					<image :src="item" mode="aspectFill"></image>
					<view class="delete_icon" @click="onDeleteContent(index)">
						<u-icon name="close-circle-fill" size="36rpx" color="#FD2A53"></u-icon>
					</view>
				</view>
				<view class="add flex_r_around" @click="chooseImage" v-if="images_list.length < 9">
					<image :src="$util.prefix('partner/partner_image_up.png')" mode="aspectFill">
					</image>
				</view>
			</view>
		</view>

		<!-- <view class="add-goods">
			<view class="label flex_r_between" @click="$util.toUrl('/pages/partner/goods')">
				<view class="left">添加商品</view>
				<view class="right flex_center">
					<text>去添加</text>
					<u-icon name="arrow-right" size="28rpx" color="#131313"></u-icon>
				</view>
			</view>
			<scroll-view scroll-x="true">
				<view class="goods-lists flex_center">
					<view class="item flex_c" v-for="(item,index) in 20" :key="index">
						<image src="/static/public/alipay.png" mode="aspectFill"></image>
						<text>￥15.87</text>
					</view>
				</view>
			</scroll-view>
		</view> -->

		<view class="input flex_r_between" @click="show_nav = true" v-if="nav_list[0].length">
			<view class="label">名片分类</view>
			<view class="right flex_center">
				<view class="view" :id="!info.tab_nav_name ? 'nohave' : ''">
					{{ info.tab_nav_name || '请选择' }}
				</view>
				<!-- <u-icon name="arrow-right" size="24rpx" color="#131313"></u-icon> -->
			</view>
		</view>

		<view class="btn flex_r_around" @click="createCard">
			<text>确定</text>
		</view>

		<w-compress ref='wCompress' />

		<u-popup :show="show_tags" @close="show_tags = false" mode="center" round="40rpx">
			<view class="modal_tags">
				<view class="modal_title flex_r_between">
					<text>标签</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show_tags = false"></u-icon>
				</view>

				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="tags_input"
						maxlength="6"></textarea>
				</view>

				<view class="modal_btn flex_r_around" @click="onEenterTag">
					<text>确定</text>
				</view>

			</view>
		</u-popup>

		<u-picker :show="show_sex" :columns="sex_list" keyName="text" @close="show_sex = false"
			@cancel="show_sex = false" @confirm="onSex"></u-picker>

		<u-picker :show="show_nav" :columns="nav_list" keyName="name" @close="show_nav = false"
			@cancel="show_nav = false" @confirm="onNav"></u-picker>

	</view>
</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue';
	export default {
		components: {
			WCompress,
		},
		data() {
			return {
				info: {
					// id
					id: 0,
					// circle_id
					circle_id: 0,
					// 头像
					avatar: '',
					// 标签
					tags: '',
					// 个性签名
					introduce: '',
					// 图片
					images: '',
					// 个人介绍
					content: '',
					// 昵称
					nickname: '',
					// 年龄
					age: '',
					// 性别
					sex: -1,
					// 二级导航
					tab_nav_id: 0,
					tab_nav_name: '',
					// 省市区
					province: '',
					city: '',
					area: '',
				},

				show_tags: false,
				tags_input: '',

				tags_list: [],
				images_list: [],

				show_sex: false,
				sex_list: [
					[{
							text: '男',
							value: '1',
						},
						{
							text: '女',
							value: '0',
						},
					]
				],

				show_nav: false,
				nav_list: [[]],
			}
		},
		methods: {

			onChooseAvatar() {
				this.$native.authorize('photos');
				uni.chooseImage({
					count: 1,
					success: (file) => {
						file.tempFilePaths.forEach(element => {
							this.$refs.wCompress.start(element, {
								pixels: 2000000, // 最大分辨率，默认二百万
								quality: 0.6, // 压缩质量，默认0.8
								type: 'png', // 图片类型，默认jpg
								// base64: false, // 是否返回base64，默认false，非H5有效
							}).then(url => {
								this.$upload(url, {
									type: 'picture'
								}).then(res => {
									if (res.status == 2 || res.status == 1) {
										this.info.avatar = res.result.url;
									} else {
										this.$util.msg(res.msg);
									}
								});
							});
						})

					}
				})
			},

			onEenterTag(e) {
				if (!this.tags_input) {
					return this.$util.msg('请填写标签')
				}
				if (this.tags_list.length < 3) {
					this.tags_list.push(this.tags_input);
				} else {
					this.$util.msg('最多添加3个')
				}
				this.tags_input = '';
				this.show_tags = false;
			},

			// 选择图片上传
			chooseImage() {
				this.$native.authorize('photos');
				var count = 9 - this.images_list.length;
				uni.chooseImage({
					count: count,
					success: (file) => {
						file.tempFilePaths.forEach(element => {
							this.$refs.wCompress.start(element, {
								pixels: 2000000, // 最大分辨率，默认二百万
								quality: 0.6, // 压缩质量，默认0.8
								type: 'png', // 图片类型，默认jpg
								// base64: false, // 是否返回base64，默认false，非H5有效
							}).then(url => {
								this.$upload(url, {
									type: 'picture'
								}).then(res => {
									if (res.status == 2 || res.status == 1) {
										this.images_list.push(res.result.url);
									} else {
										this.$util.msg(res.msg);
									}
								});
							});
						})

					}
				})
			},

			createCard() {
				// if (!this.info.avatar) {
				// 	return this.$util.msg('请选择头像');
				// }

				// if (!this.images_list.length) {
				// 	return this.$util.msg('请上传图片详情');
				// }

				// if (!this.info.introduce) {
				// 	return this.$util.msg('请填写个性签名');
				// }

				// if (!this.info.content) {
				// 	return this.$util.msg('请填写个人介绍');
				// }

				if (!this.tags_list.length) {
					return this.$util.msg('请添加标签');
				}

				// if (Number(this.info.age) < 18) {
				// 	return this.$util.msg('年龄不满18');
				// }

				this.info.images = this.images_list.join(',');
				this.info.tags = this.tags_list.join(',');
				this.$post('/circle.circle_call_card/createCard', this.info).then(res => {
					this.$util.msg(res.msg);
				});
			},

			onSex(e) {
				this.info.sex = e.value[0].value;
				this.show_sex = false;
			},

			onDeleteContent(index) {
				this.images_list.splice(index, 1);
			},

			getData() {
				this.$get('/circle.circle_call_card/getCallCardInfo', {
					call_card_id: this.info.id,
					circle_id: this.info.circle_id,
				}).then(res => {
					this.tags_list = res.data.tags.split(',');
					this.images_list = res.data.images.split(',');
					this.info.nickname = res.data.nickname;
					this.info.avatar = res.data.avatar;
					this.info.introduce = res.data.introduce;
					this.info.content = res.data.content;
					this.info.age = res.data.age;
					this.info.sex = res.data.sex;
				})
			},

			getUser() {
				this.$get('/user/info').then(res => {
					this.info.sex = res.data.gender;
					this.info.avatar = res.data.avatar;
					this.info.nickname = res.data.nickname;
					this.info.age = res.data.age;
					this.info.introduce = res.data.sign;
					this.info.province = res.data.province;
					this.info.city = res.data.city;
					this.info.area = res.data.area;
				})
			},

			getCircleNavList() {
				this.$get('/circle.circle/getCircleNavList', {
					circle_id: this.info.circle_id,
					tab_type: 8,
				}).then(res => {
					if (res.data.list.length == 1) {
						this.info.tab_nav_id = res.data.list[0].id;
						this.info.tab_nav_name = res.data.list[0].name;
					}
					this.nav_list = [res.data.list];
				})
			},

			onNav(e) {
				this.info.tab_nav_id = e.value[0].id;
				this.info.tab_nav_name = e.value[0].name;
				this.show_nav = false;
			},

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.info.circle_id = option.circle_id || 0;
			this.info.id = option.id || 0;
			if (this.info.id && this.info.id != 0) {
				this.getData();
			}
			this.getUser();
			this.getCircleNavList();
		}
	}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		background: #FFFFFF;
		padding-bottom: 30rpx;
	}

	.avatar {
		width: 144rpx;
		height: 144rpx;
		position: relative;
		margin: 64rpx 0 52rpx;

		.avatar_image {
			width: 144rpx;
			height: 144rpx;
			border-radius: 72rpx;
		}

		.avatar_icon {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: 0;
			bottom: 0;
		}

	}

	.input {
		width: 686rpx;
		height: 100rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		padding: 0 32rpx;
		margin-bottom: 20rpx;

		.label {
			font-size: 28rpx;
			color: #131313;
			line-height: 28rpx;
			margin-right: 24rpx;
		}

		.right {
			.view {
				flex: 1;
				text-align: right;
				font-size: 26rpx;
				color: #131313;
				line-height: 36rpx;
			}

			#nohave {
				color: #999;
			}

			input {
				flex: 1;
				text-align: right;
				font-size: 26rpx;
				color: #131313;
				line-height: 36rpx;
			}
		}
	}

	.textarea {
		width: 686rpx;
		height: 200rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		padding: 24rpx 32rpx;
		overflow: hidden;

		textarea {
			width: 100%;
			height: 100%;
			font-size: 28rpx;
			color: #131313;
			line-height: 32rpx;
		}
	}

	.tags {
		width: 686rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		padding: 38rpx 32rpx;
		margin: 20rpx 0;

		.tags_title {
			font-size: 28rpx;
			color: #131313;
			line-height: 28rpx;
		}

		.length {
			font-weight: 500;
			font-size: 26rpx;
			color: #999999;
			line-height: 36rpx;
		}

		.tags_list {
			flex-wrap: wrap;
			margin: 12rpx 0 18rpx;

			.tags_item {
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 0 36rpx;
				margin-right: 20rpx;
				margin: 8rpx 20rpx 8rpx 0;
				position: relative;

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
					line-height: 56rpx;
				}

				.tags_list_icon {
					position: absolute;
					right: -12rpx;
					top: -12rpx;
				}

			}
		}

		.tags_input {
			background: #FFFFFF;
			border-radius: 16rpx;
			height: 96rpx;
			padding: 0 24rpx;

			.placeholder {
				font-size: 26rpx;
				color: #666;
				flex: 1;
			}

			text {
				font-size: 26rpx;
				color: #999999;
				line-height: 36rpx;
			}
		}

	}

	.modal_tags {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 34rpx 16rpx 38rpx 32rpx;

		.modal_title {
			text {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}

		.modal_textarea {
			width: 552rpx;
			height: 208rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 24rpx;
			margin: 32rpx 0;
			overflow: hidden;

			textarea {
				font-size: 28rpx;
				color: #333;
				line-height: 36rpx;
			}
		}

		.modal_btn {
			width: 320rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 44rpx;
			margin: 0 auto;

			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

	}

	.content_image {
		width: 686rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		margin: 20rpx 0;
		padding: 38rpx 22rpx;

		.label {
			font-size: 28rpx;
			color: #131313;
			margin-bottom: 30rpx;
		}

		.images_list {
			flex-wrap: wrap;

			.add {
				width: 176rpx;
				height: 176rpx;
				margin: 0 16rpx 32rpx 16rpx;

				image {
					width: 176rpx;
					height: 176rpx;
				}
			}

			.image_box {
				position: relative;
				width: 176rpx;
				height: 176rpx;
				margin: 0 16rpx 32rpx 16rpx;

				image {
					width: 176rpx;
					height: 176rpx;
					border-radius: 24rpx;
				}

				.delete_icon {
					position: absolute;
					right: 12rpx;
					top: 12rpx;
				}
			}
		}
	}

	.add-goods {
		width: 686rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		margin: 20rpx 0;
		padding: 36rpx 32rpx;

		.label {
			.left {
				font-size: 28rpx;
				color: #131313;
			}

			.right {
				text {
					font-size: 26rpx;
					color: #999999;
					margin-right: 8rpx;
				}
			}
		}

		.goods-lists {

			margin-top: 36rpx;

			.item {
				margin-right: 12rpx;
				flex-shrink: 0;

				image {
					width: 124rpx;
					height: 124rpx;
					background: #D8D8D8;
					border-radius: 16rpx;
					margin-bottom: 12rpx;
				}

				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}

	}

	.btn {
		width: 560rpx;
		height: 100rpx;
		background: #FD2A53;
		border-radius: 50rpx;
		border: 2rpx solid #FD2A53;
		margin-top: 60rpx;

		text {
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>